<template>
	<view>
		<u-popup bgColor="transparent" mode="center" :show="show" @close="close" :closeable="true">
			<view class="regBlock">
				<view class="regTitle">
					注册账号
				</view>
				<view style="width: 650rpx;margin-top: 30rpx;display: flex;flex-direction: column;align-items: center;">
					<u-form labelWidth="200rpx" :labelStyle="{ color: '#FFFFFF', fontSize: '30rpx',opacity:'0.6' }"
						labelPosition="top" :model="userInfo" :rules="rules" ref="uForm">
						<u-form-item label="手机号" prop="mobile">
							<view class="ipt">
								<u-input maxlength="11" fontSize="32rpx" color="#FFFFFF"
									placeholderClass="placeholderClass" placeholder="请输入手机号" border="none"
									v-model="userInfo.mobile"></u-input>
							</view>
						</u-form-item>
						<u-form-item label="验证码" prop="smsCode">
							<view class="ipt">
								<u-input maxlength="6" fontSize="32rpx" color="#FFFFFF"
									placeholderClass="placeholderClass" placeholder="请输入验证码" border="none"
									v-model="userInfo.smsCode">
									<view slot="suffix">
										<view v-if="codeType==0" style="color: #1DA779;" @click="handleCode">获取验证码
										</view>
										<view v-if="codeType==1" style="color: #1DA779;">发送中...</view>
										<view v-if="codeType==2" style="color: #CFCFCF;">{{countdown}}s</view>
									</view>
								</u-input>
							</view>
						</u-form-item>
						<u-form-item label="设置密码" prop="password">
							<view class="ipt">
								<u-input type="password" fontSize="32rpx" color="#FFFFFF"
									placeholderClass="placeholderClass" placeholder="请输入密码" border="none"
									v-model="userInfo.password"></u-input>
							</view>
						</u-form-item>
						<u-form-item label="确认密码" prop="newPassword">
							<view class="ipt">
								<u-input type="password" fontSize="32rpx" color="#FFFFFF"
									placeholderClass="placeholderClass" placeholder="请再次输入密码" border="none"
									v-model="userInfo.newPassword"></u-input>
							</view>
						</u-form-item>

						<u-form-item label="邀请码" prop="idNumber">
							<view class="ipt">
								<u-input fontSize="32rpx" color="#FFFFFF" placeholderClass="placeholderClass"
									placeholder="请输入邀请码" border="none" v-model="userInfo.idNumber"></u-input>
							</view>
						</u-form-item>
					</u-form>
					<view style="margin-top: 30rpx;">
						<u-button :custom-style="customStyleBtn1" @click="submit" :loading="loading">
							<image src="/static/register.png" mode="widthFix" style="width: 35rpx;margin-right: 10rpx;">
							</image>
							注册
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		setRegister,
		smsMobileCode
	} from '@/api/login.js'
	import {getDeviceIMEI} from '@/utils/common.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				countdown: 60, // 设置倒计时初始值
				isCounting: false, // 是否正在倒计时
				timer: null, // 用于存储计时器
				codeType: 0,
				loading: false,
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					newPassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}],
					idNumber: [{
						required: true,
						message: '请输入邀请码',
						trigger: ['blur', 'change']
					}]
				},
				customStyleBtn1: {
					width: '616rpx',
					height: '96rpx',
					borderRadius: '30rpx',
					background: 'linear-gradient(to right, #704BF7, #0CECA6)',
					fontSize: '33rpx',
					fontWeight: 800,
					color: '#FFFFFF',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px',
					isEye: false
				},
				userInfo: {
					mobile: '',
					password: '',
					newPassword: '',
					smsCode: '',
					idNumber: ''
				},
				sdk_int: null,
				phonetype: 1,
				deviceid: '',

			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async res => {
					if (this.userInfo.password != this.userInfo.newPassword) {
						uni.showToast({
							title: '重置密码不同请检查',
							icon: 'none',
							duration: 3000
						})
						return
					}
					try {
						this.loading = true
						let loginRes = await setRegister(this.userInfo)
						this.loading = false
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.close()
					} catch (error) {
						this.loading = false
					}

				}).catch(errors => {})
			},
			// 获取验证码
			handleCode() {
				if (!this.userInfo.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					retrun
				}
				this.codeType = 1
				if (this.isCounting) return;
				this.getCode()
			},
			// 获取验证码
			async getCode() {
				try {
					const res = await smsMobileCode({
						mobile: this.userInfo.mobile,
						type: 1
					})
					this.isCounting = true; // 设置为正在倒计时状态
					this.timer = setInterval(() => {
						this.codeType = 2
						if (this.countdown <= 0) {
							this.codeType = 0
							clearInterval(this.timer); // 清除定时器
							this.isCounting = false;
							this.countdown = 60; // 重置倒计时
						} else {
							this.countdown--;
						}
					}, 1000);
				} catch (error) {
					this.codeType = 0
					//TODO handle the exception
				}

			},
			close() {
				this.$emit('success')
			},
			
			
		}
	}
</script>

<style scoped>
	.ipt {
		width: 616rpx;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #22304D;
		border: 4rpx solid #313F5A;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.regTitle {
		width: 616rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #FFFFFF;
		font-size: 35rpx;
		font-weight: 800;
	}

	.regBlock {
		width: 710rpx;
		min-height: 1000rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		background-color: #091836;
		border-radius: 30rpx;

	}
</style>